<template>
  <div class="home">
    <n-spin :show="loading">
        <n-space vertical>
            <n-space :style="{lineHeight: '37px', justifyContent: 'center'}">每天<n-input-number :disabled="status === 1" :style="{width: '90px', display: 'inline-block'}" v-model:value="hour" placeholder="几" :min="0" :max="23"/>点<n-button type="primary" @click="toggleCron">{{cronBtnText}}</n-button></n-space>
            <n-button  type="primary" :disabled="status === 1" @click="fetchData">获取当天</n-button>
        </n-space>
        <n-list bordered>
            <n-list-item v-for="item in list" :key="item.link">
                <n-space>
                    <span>{{item.title}}</span>
                    <span>{{item.link}}</span>
                    <span>{{item.filePath}}</span>
                </n-space>
            </n-list-item>
        </n-list>
    </n-spin>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, ref, toRefs } from 'vue';
import { useMessage } from 'naive-ui'
import { CronJob } from 'cron';
import { ipcRenderer } from 'electron';
interface cronDataModel {
    cronBtnText: string;
    job: CronJob,
    status: number;
    toggleCron: () => void;
    fetchData: () => void;
}
export default defineComponent({
    name: 'Home',
    setup() {
        const message = useMessage()
        let loading = ref(false), hour = ref(19), list = ref([]);
        function initJob(hour: number) {
            let hourStr = hour > 9?hour+'':'0' + hour;
            const job = new CronJob(
                    '* * '+ hourStr +' * * *',
                    function() {
                        loading.value = true
                        ipcRenderer.send('start-fetch')
                    },
                    null,
                    false,
                    'Asia/Shanghai'
            );
            return job;
        }
        function startFetch() {
            loading.value = true
            console.log(ipcRenderer)
            console.log('发起')
            let res = ipcRenderer.sendSync('start-fetch');
            console.log(res)
        }
        const cronData: cronDataModel = reactive({ 
            cronBtnText: '暂停定时获取',
            status: 1,
            job: initJob(18),
            toggleCron: () => {
                if(cronData.status == 1) {
                    cronData.status = 0;
                    cronData.cronBtnText = '开始定时获取';
                    cronData.job.stop();
                }else {
                    let h = hour.value;
                    const job = initJob(h);
                    cronData.job = job;
                    cronData.cronBtnText = '暂停定时获取';
                    cronData.status = 1;
                    cronData.job.start();
                }
            },
            fetchData: () => {
                startFetch()
            }
        })
        const refCronData= toRefs(cronData)
        onMounted(() => {
            ipcRenderer.on('end-fetch', (event, _list) => {
                if(_list.length> 0) {
                    list.value = _list;
                    message.success('成功抓取了'+_list.length+'条');
                }
                loading.value = false
            })
        })
        return {
            ...refCronData,
            loading,
            hour,
            list
        };
    }
});
</script>
